<template>
  <div class="container" @scroll="onScroll">
    <div
      class="panel"
      ref="panel"
      :style="{
        paddingTop: paddingTop + 'px'
      }"
    >
      <div class="item" v-for="item in visibleList" :key="item">{{ item }}</div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from "vue";
let t = Date.now()
export default {
  setup() {
    let panel = ref(null)
    let raw = Array(100000).fill(0).map((v, i) => `item-${i}`);
    let count = 10;
    let start = ref(0);
    let end = ref(10);
    let itemHeight = 30;
    let paddingTop = ref(0);
    let totalHeight = raw.length*itemHeight

    let visibleList = computed(() => raw.slice(start.value, end.value));
    onMounted(() => {
      panel.value.style.height = totalHeight + 'px'
      console.log('耗时' + (Date.now() - t) + 'ms')
    })
    const onScroll = function (e) {
      console.log(e.target.scrollTop)
      start.value = Math.floor(e.target.scrollTop / itemHeight);
      end.value = start.value + count;
      //paddingTop.value = start.value*itemHeight;
      paddingTop.value = start.value*itemHeight;
      console.log(end.value)
    };

    return {
      visibleList,
      paddingTop,
      panel,
      onScroll,
    };
  },
};
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
}
.container {
  height: 300px;
  overflow: scroll;
}

.item {
  border: 1px solid #eee;
  line-height: 30px;
  height: 30px;
  padding: 0 10px;
  cursor: pointer;
}

</style>
